<template>
  <div id="part9">
    <section>
      <p>v-if 为true 会触发子组件的creat和mount</p>
      <button @click="vIf = true">加载</button>
      <p>v-show 不会触发子组件的状态更新</p>
      <button @click="vShow = true">显示</button>
      <p>v-if 为false 会触发子组件的distory</p>
      <button @click="vIf = false">销毁</button>
      <p>子组件传递的数据更新时会触发updata</p>
      <button @click="updata()">更新</button>
      <keep-alive>
        <lifecycle v-if="vIf" v-show="vShow" :data="data"></lifecycle>
      </keep-alive>
      <article>
        <section>vue生命周期可分为creat，mount，updat和distory</section>
        <img class="Img" src="../assets/img/part9/lifecycle.png" alt="vue生命周期" />
        <section>
          在各个状态下分别输出一下prop（父组件传入的值）data（组件内部定义的值）和 ref （模板中的标签）得到如下结果
          <img
            class="Img"
            src="../assets/img/part9/各个状态下数据状态.png"
          />
        </section>
      </article>
    </section>
  </div>
</template>
<script>
import lifecycle from "../components/part9/lifeCycle/compont";
export default {
  name: "part9",
  components: {
    lifecycle
  },
  data() {
    return {
      vIf: false,
      vShow: false,
      data: 123
    };
  },
  methods: {
    updata() {
      this.data++;
    }
  }
};
</script>
<style scoped>
.Img {
  display: block;
  width: 50%;
  min-width: 300px;
  margin: 0 auto;
}
</style>